<template>
	<view class="content">
		<u-subsection
			:list="list"
			:current="current"
			:animation="true"
			bgColor="#1B1B1B"
			active-color="#7D0C0C"
			@change="sectionChange"
			font-size="30"
			height="93"
			inactive-color="#ffffff"
		></u-subsection>
		<view class="" v-if="current == 0">
			<view v-for="(item, index) in data" :key="index">
				<view :class="[item.status === 1 ? 'unused' : 'used']" id="info" @click="clkEvnt(item)">
					<text class="text">{{ item.title || '优惠券' }}</text>
					<text class="text1">{{ item.price || 0 }}</text>
					<text class="text22">数量 ： {{ item.number }} 张</text>
					<text class="text2">起止日期 ：{{ item.validity || '' }}</text>
					<text class="text3">使用须知 ></text>
				</view>
			</view>
			<u-empty text="没有优惠券" mode="coupon" v-if="data.length === 0"></u-empty>
		</view>
		<view class="" v-if="current == 1">
			<view v-for="(item, index) in data1" :key="index">
				<view class="unused" id="info" @click="open(item.id)">
					<text class="text">{{ item.title || '优惠券' }}</text>
					<text class="text1">{{ item.price || 0 }}</text>
					<text class="text22">数量 ： {{ item.cont || 0 }} 张</text>
					<text class="text2">起止日期 ：{{ item.validity || '0' }}</text>
					<!-- <text class="text3">兑换消耗积分：100</text> -->
				</view>
			</view>
			<u-empty text="没有优惠券" mode="coupon" v-if="data1.length === 0"></u-empty>
		</view>

		<u-modal
			ref="uModal"
			v-model="show"
			:show-cancel-button="true"
			:show-title="showTitle"
			:content-style="{ backgroundColor: '#333' }"
			confirm-color="#FF1C1C"
			cancel-color="#DCDCDC"
			:async-close="asyncClose"
			@confirm="confirm"
			:content="content"
		>
			<view class="warp" style="padding-top: 30rpx;" v-if="contentSlot">
				<image class="logo" src="../../../static/myCoupon.png" style="width: 220rpx;" mode="widthFix"></image>
			</view>
			<view class="warp">{{ content }}</view>
		</u-modal>
		
		
		<!-- <u-modal
			ref="uModal"
			v-model="show1"
			:show-cancel-button="true"
			:show-title="showTitle"
			:content-style="{ backgroundColor: '#333' }"
			confirm-color="#FF1C1C"
			cancel-color="#DCDCDC"
			:async-close="asyncClose"
			@confirm="confirm1"
			:content="content"
		>
			<view class="warp" style="padding-top: 30rpx;" v-if="contentSlot">
				<image class="logo" src="../../../static/myCoupon.png" style="width: 220rpx;" mode="widthFix"></image>
			</view>
			
			<view class="warp"><input type="text" value=""  placeholder="请输入优惠券的数量" v-model="quantity" focus="" /></view>
		</u-modal>
		 -->
		
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			quantity:'',
			show: false,
			show1: false,
			zoom: false,
			content: '是否兑换该优惠券',
			contentSlot: true,
			showTitle: false,
			asyncClose: false,
			page: 1, //第一页
			limit: 10, // 每页10条
			data: [],
			data1: [],
			current: 0,
			couponId: '',
			item:'',
			list: [
				{
					name: '已拥有',
				},
				{
					name: '可兑换',
				},
			],
		};
	},
	onShow() {},
	onLoad() {
		this.getCoupons();
	},
	methods: {
		open(id) {
			console.log('id :>> ', id);
			this.show = true;
			this.couponId = id;
		},
		async confirm() {
			const res = await this.$u.post('api/user/user_coupons', {
				uid: uni.getStorageSync('uid'),
				yid: this.couponId,
			});
			this.getCoupons();
			console.log('res111 >>  ', res);
			this.show = false;
			uni.$showMsg('兑换成功!');
		},
		sectionChange(index) {
			this.current = index;
			console.log(index);
			this.getCoupons();
		},
		
		async confirm1(){
			 // if (!this.item.price) return uni.$showMsg('优惠券的价格为零');
			 if ( this.quantity > this.item.number) return uni.$showMsg('优惠券的数量不足');
			 if (this.item.status == 1) {
			 	console.log('this.item.price :>> ', this.item.price);
			 	let pages = getCurrentPages(); 
			 	let nowPage = pages[pages.length - 1]; 
			 	let prevPage = pages[pages.length - 2]; 
			 	let obj = {
			 		id : this.item.id,
					number:1
			 	}
			 	prevPage.$vm.couponData = obj; 
			 	uni.navigateBack({
			 		delta: 1, 
			 	});
			 } else {
			 	uni.$showMsg('优惠券已经使用');
			 }
		},
		
		
		//获取优惠券
		async getCoupons() {
			if (this.current === 0) {
				const res = await this.$u.post('api/user/coupons', {
					uid: uni.getStorageSync('uid'),
				});
				console.log('res :>> ', res);
				this.data = res.data;
			} else {
				const res = await this.$u.post('api/user/coupons_list', {
					uid: uni.getStorageSync('uid'),
				});
				console.log('res :>> ', res);
				this.data1 = res.data;
			}
		},

		clkEvnt(item) {
			console.log('item :>> ', item);
			this.show1 = true
			this.item = item
			this.confirm1()
		},
	},
};
</script>

<style lang="scss" scoped>
/deep/ .u-subsection {
	width: 640rpx;
	margin: 0 auto;
}

/deep/.u-item-bg {
	width: 100%;
	height: 6rpx !important;
	background: #7d0c0c !important;
	border-radius: 3rpx !important;
}

/deep/.u-item {
	width: 107rpx !important;
}

/deep/.u-model.data-v-713d0fd3 {
	background-color: #333;
}
.warp {
	text-align: center;
	color: #fff;
}
/deep/.u-icon {
	margin-top: 40vh;
}
.content {
	width: 100vw;
	height: 100vh;
	overflow: scroll;
	background-color: #1b1b1b;
	padding: 26rpx 21rpx;

	/deep/ .u-empty {
		margin-top: -75px !important;
	}

	// 未使用
	.unused {
		background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/%E7%BB%84%20122%402x.png') no-repeat center;
		background-size: cover;
	}

	// 已使用
	.used {
		background: url('https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/weijiedan.png') no-repeat center;
		background-size: cover;
	}

	#info {
		width: 710rpx;
		height: 254rpx;
		border-radius: 15rpx;
		padding: 26rpx 50rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 26rpx;

		.text {
			height: 31rpx;
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #1b1b1b;
			line-height: 31rpx;
		}

		.text1 {
			font-size: 60rpx;

			height: 47rpx;
			line-height: 47rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #1b1b1b;
			margin-top: 10rpx;
		}

		.text2 {
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #1b1b1b;
			margin-top: 10rpx;
		}

		.text22 {
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #1b1b1b;
			margin-top: 10rpx;
		}

		.text3 {
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #880000;
			margin-top: 10rpx;
		}
	}
}
</style>
